<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			http-equiv="X-UA-Compatible"
			content="IE=edge"
		/>
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0"
		/>
		<title>Document</title>
		<style>
			table tr:nth-of-type(odd) {
				background-color: rgb(129, 104, 22);
			}
            table tr:nth-of-type(even) {
				background-color: mediumturquoise;
			}
		</style>
	</head>
	<body>
		<script>
			var arr = [
				{
					name: "张三",
					age: 20,
					height: "178cm",
				},
				{
					name: "李四",
					age: 21,
					height: "178cm",
				},
				{
					name: "王五",
					age: 22,
					height: "178cm",
				},
				{
					name: "甘六",
					age: 23,
					height: "178cm",
				},
			];
			var tab = document.createElement("table");
			arr.forEach(function (item, key) {
				var tr = document.createElement("tr");
				for (var a in item) {
					var td = document.createElement("td");
					td.innerHTML = item[a];
					tr.appendChild(td);
				}
				var btnDel = document.createElement("button");
				var tdDel = document.createElement("td");
				btnDel.innerHTML = "删除";
				tdDel.appendChild(btnDel);
				tr.appendChild(tdDel);
				tab.appendChild(tr);
				btnDel.onclick = function () {
					tab.removeChild(tr);
				};
			});
			document.body.appendChild(tab);
		</script>
	</body>
</html>
